<template>
    <div>
        <el-button type="primary" @click="addSubject()"> 新增科目</el-button>
        <el-input v-model="search" placeholder="输入关键字搜索" style="width: 400px;margin-left: 300px;" />
        <el-button type="primary" @click="reset()" style="margin-left: 30px;"> 重置</el-button>
        <el-table :data="tableData.filter(data => !search || data.subjectName.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <el-table-column label="科目名称" prop="subjectName">
            </el-table-column>
            <el-table-column label="学分" prop="score">
            </el-table-column>
            <el-table-column>
                <template slot="header">
                   
                </template>
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.$index, scope.row)"  type="success"> 编辑</el-button>
                    <el-button type="danger" @click="handleDelete(scope.$index, scope.row)"> 删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.page"
            :page-sizes="[2,10, 20, 30, 40]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>


        <el-dialog title="新增/编辑科目" :visible.sync="dialogFormVisible">
            <el-form :model="form">

                <el-form-item label="科目名称" :label-width="formLabelWidth" prop="subjectName">
                    <el-input v-model="form.subjectName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学分" :label-width="formLabelWidth" prop="score">
                    <el-input v-model="form.score" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false"> 取 消</el-button>
                <el-button type="primary" @click="confirmSubeject(form)"> 确 定</el-button>
            </div>
        </el-dialog>



    </div>
</template>

<script>
import { listSubject, updateSubject, saveSubject, deleteSubject } from '../../../api/admin/subject.js'
export default {
    name: "Subject",
    data() {
        return {
            tableData: [],
            search: '',
            page: {
                page: 1, //初始页
                pageSize: 10, //    每页的数据
            },

            dialogFormVisible: false,
            form: {
                id: '',
                subjectName: '',
                score: ''
            },
            formLabelWidth: '120px',
            tag: '123',
            //总数据条数
            total: 0,
        }
    },
    created() {
        this.listAllSubject(this.page)
    },
    methods: {
        // 重置
        reset() {
            this.search = ''
        },
        addSubject() {
            this.dialogFormVisible = true
            this.tag = '8888'
            this.form.subjectName = ''

        },
        handleEdit(index, row) {
            this.tag = 'edit'
            console.log(this.tag)
            this.dialogFormVisible = true
            this.form.id = row.id
            this.form.subjectName = row.subjectName
        },
        confirmSubeject(form) {
            if (this.tag != 'edit') {
                saveSubject(form).then(resp => {
                    console.log(resp)
                    if (resp.data.code == 200) {
                        this.listAllSubject(this.page)
                        this.dialogFormVisible = false
                        this.tag = ''
                        this.$message({
                            message: '新增成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error(resp.data.resultData);
                    }
                })
            } else {
                updateSubject(form).then(resp => {
                    if (resp.data.code == 200) {
                        this.dialogFormVisible = false
                        this.listAllSubject(this.page)
                        this.$message({
                            message: '编辑成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('编辑失败');
                    }
                })
            }

        },
        listAllSubject(page) {
            listSubject(page).then(resp => {
                this.tableData = resp.data.resultData.data
                this.total = resp.data.resultData.total
            })
        },
        handleSizeChange(size) {
            this.page.pageSize = size;
            this.listAllSubject(this.page)
            // console.log(this.pageSize,'888')
            console.log(`每页 ${size} 条`);
        },
        handleCurrentChange(pageNum) {
            this.page.page = pageNum;
            this.listAllSubject(this.page)
            console.log(`当前页: ${pageNum}`);
        },

        handleDelete(index, row) {
            this.form.id = row.id
            deleteSubject(this.form).then(resp => {
                if (resp.data.code == 200) {
                    this.listAllSubject(this.page)
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error('删除失败 ');
                }
            })
        }
    }

}
</script>

<style scoped></style>